<template>
  <div>
    <van-grid :border="false" :column-num="5">
      <van-grid-item
        v-for="(val,i)  in iconData"
        @click="windowHref(val,i)"
        :key="i"
        :icon="imgBox[val.channel][i]"
        :text="val.menuname"
      />
    </van-grid>
    <HqBox></HqBox>
    <load-list class="mt20" :titleConfig="titleconfig"></load-list>
    <van-popup v-model="show" round :overlay-style="background">
      <div class="allSort">
        <ul>
          <li
            class="sortLi"
            v-for="(i,index) in allSort"
            :key="index"
            @click="windowHref(i)"
          >{{i.menuname}}</li>
        </ul>
        <div class="cancleBtn" @click="claseWay">取消</div>
      </div>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import { imgBox, gdData, newsTitle } from "../assets/data/menuData.js";
import LoadList from "./newslist/loadMoreList.vue";
import HqBox from "./hqBox";
export default {
  components: {
    LoadList,
    HqBox
  },
  data() {
    return {
      titleconfig: { title: "聚焦" },
      background: { background: "rgba(0,0,0,0.4)" },
      show: false,
      imgBox,
      obj: {
        title: "聚焦",
        name: this.$route.meta.path
      },
      channel: this.$route.meta.path, //代表菜单种类
      channelList: this.$store.state.indexData.newsList[this.$route.meta.path],
      allSort: []
    };
  },
  computed: {
    iconData() {
      let icongd = gdData[this.channel]; //下面的5个可变动的icon
      let iconAll;
      try {
        let iconpart =
          this.$store.state.indexData.menuListpart[this.channel] || [];
        iconAll = icongd.concat(iconpart);
      } catch (error) {
        let iconpart = [];
        iconAll = icongd;
      }
      return iconAll;
    }
  },

  methods: {
    claseWay() {
      this.show = false;
    },
    showPopup() {
      this.allSort = this.$store.state.indexData.menuAllListpart[this.channel];
      this.show = true;
    },
    //icon跳转
    windowHref(val, i) {
     if (i === 0) {
          let path ;
        if (this.$route.query.channel == "tcl") {
          path = `priceparttcl`;
        } else if (this.$route.query.channel == "dc") {
          path = `pricepartdc`;
        } else if (this.$route.query.channel == "dlg") {
          path = `pricepartdlg`;
        }
        this.$router.push({ name: path, query: val });
      } else  if (i <= 4) {
         
        let path = this.setHref(i);
        val.img = "";
        this.$router.push({ name: path, query: val });
      } else if (i == 9) {
        val.img = "";

        this.showPopup();
      } else {
        val.img = "";
        this.$router.push({ name: "iconfive", query: val });
      }
    },
    setHref(i) {
      switch (i) {
        case 0:
          return "pricepart";
          break;
        case 1:
          return "consultpart";
          break;
        case 2:
          return "priceSj";
          break;
        case 3:
          return "reportpart";
          break;
        case 4:
          return "replaypart";
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style scoped lang="less">
.mt20 {
  margin-top: 0.2rem;
}
.allSort {
  width: 6.9rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
  border-radius: 0.16rem;

  ul {
    padding: 0.4rem 0.4rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .sortLi {
    width: 1.9rem;
    height: 0.7rem;
    background: rgba(252, 245, 234, 1);
    border-radius: 0.08rem;
    text-align: center;
    line-height: 0.7rem;
    font-size: 0.28rem;
    font-weight: 500;
    color: rgba(228, 152, 41, 1);
    margin-bottom: 0.3rem;
  }
  .cancleBtn {
    line-height: 0.9rem;
    text-align: center;
    font-size: 0.3rem;
    color: rgba(39, 41, 55, 1);
    border-top: 0.01rem solid rgba(229, 229, 229, 1);
  }
}
</style>
